<template>
	<view class="shop">
		<view class="top">
			<view class="top_1">
				<view class="left">
					<image :src="data.httpUrl+'/app/file/viewFile?fileId='+data.info.logFileId" mode="aspectFill">
					</image>
				</view>
				<view class="right">
					{{data.info.storeName}}
					<view>
						{{data.info.workState}} {{data.info.workDays}} {{data.info.workTime}}
					</view>
				</view>
			</view>
			<view class="top_2">
				<view class="">
					<image src="/static/img/index/163.png" mode="widthFix"></image>
					{{data.info.flagQualifications.name}}
				</view>
				<view class="">
					<image src="/static/img/index/164.png" mode="widthFix"></image>
					{{data.info.credit}}
				</view>
				<view class="">
					<image src="/static/img/index/165.png" mode="widthFix"></image>
					{{data.info.bondAmount>=10000?Math.floor(data.info.bondAmount/10000)+'万+':data.info.bondAmount}}
				</view>
			</view>
			<view class="top_3">
				<text :class="data.index == 0?'active':''" @tap="data.index = 0">全部</text>
				<text :class="data.index == 1?'active':''" @tap="data.index = 1">评价</text>
			</view>
		</view>
		<swiper @change="swiperChange" :current="data.index">
			<swiper-item>
				<GoodsList :storeId="data.storeId" />
			</swiper-item>
			<swiper-item>
				<ShopEvaluate ref="shopEvaluatec" :storeId="data.storeId" />
			</swiper-item>
		</swiper>
	</view>
</template>

<script setup lang="ts">
	import { reactive, ref, nextTick } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import GoodsList from './components/goodsList'
	import ShopEvaluate from './components/shopEvaluate'
	import { otherStoreInfo } from '@/utils/api/goods'
	const shopEvaluatec = ref()
	const data = reactive<any>({
		info: {},
		storeId: '',
		index: 0,
		httpUrl: getApp().globalData.baseUrl,
	})
	onLoad(({ id }) => {
		data.storeId = id;
		otherStoreInfo({ data: { storeId: id } }).then((res) => {
			if (res.data.bondAmount >= 1000000) {
				res.data.bondAmount = ((res.data.bondAmount / 10000 + '').split('.')[0]) + '万'
			}
			data.info = res.data;
		})
		nextTick(() => {
			console.log(shopEvaluatec.value.requstList, 'shopEvaluatec.value.requstList')
			shopEvaluatec.value.requstList(1)
		})
	})
	const swiperChange = (e) => {
		data.index = e.detail.current;
	}
	const navTo = (url : string) => {
		uni.navigateTo({
			url
		})
	}
</script>

<style lang="scss">
	swiper {
		flex: 1;

		swiper-item {
			display: flex;
			flex-direction: column;
		}
	}

	.shop {
		height: 100vh;
		background: #F4F6FA;
		display: flex;
		flex-direction: column;

		>.top {
			padding: 0rpx 32rpx 8rpx 32rpx;
			background: #fff;

			.top_1 {
				display: flex;
				align-items: center;

				.left {
					width: 128rpx;
					height: 128rpx;
					border-radius: 50%;
					background: #ccc;
					margin-right: 24rpx;

					image {
						width: 128rpx;
						height: 128rpx;
						border-radius: 50%;
					}
				}

				.right {
					font-size: 36rpx;

					view {
						margin-top: 16rpx;
						display: flex;
						align-items: center;
						font-size: 22rpx;

						image {
							width: 18rpx;
							margin-left: 7rpx;
						}
					}
				}
			}

			.top_2 {
				display: flex;
				margin: 20rpx 0 24rpx 0;

				view {
					border-radius: 8rpx;
					padding-right: 16rpx;
					margin-right: 16rpx;
					display: flex;
					align-items: center;

					image {
						width: 86rpx;
						margin-right: 10rpx;
					}
				}

				view:nth-of-type(1) {
					margin-right: 24rpx;
					color: #6B64D3;
					background: #F0E6FF;
				}

				view:nth-of-type(2) {
					margin-right: 24rpx;
					background: #CEEFFF;
					color: #40AFFF;
				}

				view:nth-of-type(3) {
					background: #FFFDCF;
					color: #FFCC40;
				}
			}

			.top_3 {
				display: flex;

				text {
					margin-right: 24rpx;
					color: #8C8C8C;
					display: flex;
					flex-direction: column;
					align-items: center;

					&::after {
						content: '';
						display: inline-block;
						width: 26rpx;
						height: 6rpx;
						margin-top: 10rpx;
						border-radius: 6rpx 0 6rpx 0;
					}
				}

				.active {
					color: #262626;

					&:after {
						background: #262626;
					}
				}
			}
		}
	}
</style>